<template>
  <header class="simple-header">
    <i v-if="!isBack" class="nbicon nbfanhui" @click="goBack"></i>
    <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
    <div class="simple-header-title">{{ props.name }}</div>
    <i class="nbicon nbmore"></i>
  </header>
  <div class="block"></div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, computed } from "vue";
const router = useRouter();
const props = defineProps({
  name: {
    type: String,
    default: () => "",
  },
  back: {
    type: String,
    default: "",
  },
  noBack: {
    type: Boolean,
    default: false,
  },
});
// 是否有返回按钮
const isBack = computed(() => {
  return props.noBack;
});

// 返回上一页
const goBack = () => {
  if (props.back) {
    router.push(props.back);
  } else {
    router.go(-1);
  }
};
</script>
<style lang="less" scoped>
@import "../common/style/mixin.less";
.simple-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  .fj();
  .wh(100%,44px);
  line-height: 44px;
  padding: 0 10px;
  .boxSizing(); //盒子模型
  color: #252525;
  background: #fff;
  border-bottom: 1px solid #dcdcdc;
  .simple-header-title {
    font-size: 14px;
  }
}
.block {
  height: 44px;
}
</style>
